<template>
  <nav-bar class="detail-nav">
    <img
      class="back"
      slot="left"
      @click="back"
      src="~assets/img/common/back.svg"
    />
    <div class="title" slot="center">
      <span
        class="title-item"
        v-for="(item, index) in titleList"
        :key="index"
        @click="titleCilck(index)"
        :class="{ active: currentIndex === index }"
      >
        {{ item }}
      </span>
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "components/common/navBar/NavBar";
export default {
  name: "DetailNavBar",
  components: {
    NavBar,
  },
  props: {
    titleList: {
      type: Array,
      default: () => ["商品", "参数", "评论", "推荐"],
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    titleCilck(index) {
      this.$emit("itemCilck", index);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.back {
  vertical-align: middle;
}
.title {
  display: flex;
  width: 100%;
  font-size: 14px;
  color: #666;
}
.title-item {
  flex: 1;
}
.active {
  color: #ff5777;
}
</style>